<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
	<title>登录</title>
	<link rel="icon" href="favicon.ico" type="image/ico">
	<link href="/static/css/bootstrap.min.css" rel="stylesheet">
	<link href="/static/css/materialdesignicons.min.css" rel="stylesheet">
	<link href="/static/css/style.min.css" rel="stylesheet">
	<script src="/static/js/jquery-3.1.1.min.js"></script>
	<script src="/static/admin/js/jconfirm/jquery-confirm.min.js"></script>
	<script src="/admin/js/common.js"></script>
	<script src="/static/js/Cookie.js"></script>
	<script>
		let currentCookie = Cookie.get("ticker")
		$(document).ready(function(){
			$("#submit-btn").click(function(){
				var userPhone = $("#userPhone").val();
				if(userPhone==''){
					alert('手机号不能为空');
					return ;
				}
				var code= $("#code").val();
				if(code==''){
					alert('验证码不能为空');
					return ;
				}
				$.ajax({
					url:'/loginByCode',
					type:'POST',
					data:{userPhone:userPhone,code:code},
					dataType:'json',
					success:function(data){
						if(data.code === 200){
							Cookie.set("ticker",data.data,1);

							window.location.href = 'toIndex';
						}else{
							alert(data.message);
						}
					},
					error:function(data){
						alert('网络错误!');
					}
				});
			});
		});
		function sendValidCode() {
			var userPhone = $("#userPhone").val();
			if (userPhone) {
				$.ajax({
					url: "card-binding/sendValidCode/" + userPhone,
					type: "get",
					headers: {
						'access-token': currentCookie,
					},
					success: function (data) {
						alert("已向该号码发送验证码，请注意查收")
					},
					error: function (data) {
						alert("后台服务器异常!")
					}
				})
			} else {
				alert("请输入手机号！")
			}

		}

	</script>
	<style>
		body {
			background-color: #fff;
		}

		.lyear-login-box {
			position: relative;
			overflow-x: hidden;
			width: 100%;
			height: 100%;
			-webkit-transition: 0.5s;
			-o-transition: 0.5s;
			transition: 0.5s;
		}

		.lyear-login-left {
			width: 50%;
			top: 0;
			left: 0;
			bottom: 0;
			position: fixed;
			height: 100%;
			z-index: 555;
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center center;
		}

		.lyear-overlay {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 10;
			background: rgba(0, 0, 0, 0.5);
		}

		.lyear-logo {
			margin-bottom: 50px;
		}

		.lyear-featured {
			z-index: 12;
			position: absolute;
			bottom: 0;
			padding: 30px;
			width: 100%;
		}

		.lyear-featured h4 {
			color: #fff;
			line-height: 32px;
		}

		.lyear-featured h4 small {
			color: #fff;
			display: block;
			text-align: right;
			margin-top: 15px;
		}

		.lyear-login-right {
			margin-left: 50%;
			position: relative;
			z-index: 999;
			padding: 100px;
			background-color: #fff;
		}

		@media screen and (max-width: 1024px) {
			.lyear-login-right {
				padding: 50px;
			}
		}

		@media screen and (max-width: 820px) {
			.lyear-login-left {
				width: 100%;
				position: relative;
				z-index: 999;
				height: 300px;
			}
			.lyear-login-right {
				margin-left: 0;
			}
		}

		@media screen and (max-width: 480px) {
			.lyear-login-right {
				padding: 50px;
			}
		}

		@media screen and (max-width: 320px) {
			.lyear-login-right {
				padding: 30px;
			}
		}
	</style>
</head>

<body>
<div class="lyear-login-box">
	<div class="lyear-login-left" style="background-image: url(/static/img/login001.jpg)">
		<div class="lyear-overlay"></div>
		<div class="lyear-featured">
			<h4>愿你有好运气，如果没有，愿你在不幸中学会慈悲；愿你被很多人爱，如果没有，愿你在寂寞中学会宽容。<small> - 刘瑜《愿你慢慢长大》</small></h4>
		</div>
	</div>
	<div class="lyear-login-right">

		<div class="lyear-logo text-center">
			<a href="#!"><h2>电子账户系统登录</h2></a>
		</div>
		<form id="login-form"  method="post">
			<div class="form-group">
				<label>手机号</label>
				<input type="text" class="form-control" name="userPhone" id="userPhone">
				<button type="button" class="btn btn-primary" onclick="sendValidCode()">
					发送验证码
				</button>
			</div>

			<div class="form-group">
				<label>验证码</label>
				<input type="text" name="code" id="code" maxlength="6" class="form-control required" placeholder="验证码" tips="请填验证码" >
				<span class="mdi mdi-check-all form-control-feedback" aria-hidden="true"></span>
			</div>
			<br /><br />
			<div class="form-group">
				<button class="btn btn-block btn-primary" id="submit-btn" type="button">立即登录</button>
			</div>
		</form>
		<form action="/toLogin" method="post">
			<div class="form-group">
				<button class="btn btn-block btn-primary"  type="submit">切换登录</button>
			</div>
		</form>
		<form action="/toRegister" method="post">
			<div class="form-group">
				<button class="btn btn-block btn-primary"  type="submit">立即注册</button>
			</div>
		</form>

	</div>
</div>
<script type="text/javascript" src="/static/js/bootstrap.min.js"></script>
<script type="text/javascript">
	;
</script>
</body>

</html>
